<template>
  <view class="page-container">
    <!-- 顶部蓝 -->
    <view class="topl">
      <image :src="`${store.imgDomain}my_data_top.png`" mode="scaleToFill" />
    </view>
    <GlobalTopBar ref="topBarRef" class="topbars" color="#fff" :isLeft="true">
      <template #title><text style="color: #fff">余额充值</text></template>
    </GlobalTopBar>
    <view class="page_content">
      <!-- 内容 -->
      <view class="ulbox">
        <view
          class="libox"
          :class="{ ac: item.status === 2 }"
          v-for="(item, index) in listData"
          :key="index + 1"
        >
          <!-- 装饰 -->
          <image :src="`${store.imgDomain}topUp_1.png`" mode="scaleToFill" />
          <!-- 标题 -->
          <view class="btoms">
            <view class="title">{{ item.recharge_card_title }}</view>
            <view class="ms"> {{ item.recharge_card_desc }}</view>
          </view>
          <!-- 价格 -->
          <view class="jgm">
            <view class="jg_t">
              <text style="font-size: 24rpx">￥</text>
              <text class="num">{{ item.buy_price }}</text>
            </view>
            <!-- 原价 -->
            <view class="yj"> 原价￥{{ item.show_price }} </view>
            <!-- 充值按钮 -->
            <view class="czbtn" @click="createBuyRechargeCardOrder(item)">
              去充值
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { validatePhone } from '@/utils/validate';

const store = useCounterStore();
// 列表数据相关
const listData = ref([]);

// 获取充值卡列表数据
const getRechargeCardList = async () => {
  try {
    const data = await request('wxapp/user/getRechargeCardList');
    listData.value = data.sort((a, b) => b.sort - a.sort);
  } finally {
  }
};
// 创建充值卡购买订单
const createBuyRechargeCardOrder = async (item) => {
  const data = await request(
    'wxapp/user/createBuyRechargeCardOrder',
    { recharge_card_id: item.id },
    'post',
  );

  uni.requestSubscribeMessage({
    tmplIds: ['w6QFvAh5Fxk6ZRsd4ffWpgayhBsYDLM1HKw4y97Bk-0'], // 替换为实际模板ID，支持
    complete() {
      if (item.buy_price == 0) {
        uni.reLaunch({
          url: `/pages/my/paymentInquiry?tid=${data.tid}&index=0`,
        });
      } else {
        wx.requestPayment({
          timeStamp: data.wx_app_pay_param.timeStamp,
          nonceStr: data.wx_app_pay_param.nonceStr,
          package: data.wx_app_pay_param.package,
          signType: data.wx_app_pay_param.signType,
          paySign: data.wx_app_pay_param.paySign,
          success: function (res) {
            uni.reLaunch({
              url: `/pages/my/paymentInquiry?tid=${data.tid}&index=0`,
            });
          },
          fail: async function (err) {
            await request(
              'wxapp/user/delUserRechargeCardOrder',
              { recharge_card_order_id: data.order_id },
              'post',
            );
            uni.showToast({
              title: '支付失败',
              icon: 'none',
            });
          },
          complete: function (res) {},
        });
      }
    },
  });
};
onShow(() => {
  getRechargeCardList();
});
</script>

<style lang="scss" scoped>
.topl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  image {
    width: 750rpx;
    height: 364rpx;
  }
}
.page_content {
  box-sizing: border-box;

  position: relative;

  .zzc {
    padding: 50rpx 0;
    text-align: center;
    position: relative;
    z-index: 1;
    border: 1px solid #437ef6;
    border-radius: 20rpx;
    background-color: #fff;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .t1 {
      font-size: 30rpx;
      color: #1e1e1e;
    }
    .t2 {
      font-size: 60rpx;
      font-weight: 600;
      color: #1e1e1e;
    }
    .czbtn {
      width: 409rpx;
      line-height: 79rpx;
      border-radius: 40rpx;
      background-color: #ff6316;
      color: #fff;
      font-size: 36rpx;
      margin: 20rpx auto;
    }
  }
}
.ulbox {
  padding: 20rpx 30rpx;
  .libox {
    position: relative;
    padding: 40rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    background: linear-gradient(to right, #fceac3, #feda9a);
    display: flex;
    justify-content: space-between;
    margin-bottom: 25rpx;
    &.ac {
      pointer-events: none;
      filter: grayscale(1);
    }
    image {
      width: 100rpx;
      height: 99rpx;
      position: absolute;
      top: 20rpx;
      right: 40rpx;
      z-index: 0;
    }
    .btoms {
      .title {
        color: #b85f1b;
        font-weight: 700;
        font-size: 36rpx;
        margin-bottom: 30rpx;
      }
      .ms {
        font-size: 24rpx;
      }
    }
    .jgm {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30rpx;
      color: #000;
      .jg_t {
        .num {
          margin-left: 5rpx;
          font-size: 42rpx;
          font-weight: 700;
        }
      }
    }
    .yj {
      font-size: 24rpx;
      color: $uni-text-color-grey;
      text-decoration: line-through;
      margin: 10rpx 0 20rpx;
    }
    .czbtn {
      color: #fff;
      line-height: 52rpx;
      border-radius: 26rpx;
      padding: 0 60rpx;
      background: linear-gradient(to bottom, #ff7d16, #ff4716);
    }
  }
}
</style>
